z<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
        
        <title>Panel Documentation</title>
        
        <script src="/js/greyspots.js" type="text/javascript"></script>
        <link href="/css/greyspots.css" type="text/css" rel="stylesheet" />
        
        <script src="/js/ace/ace.js" data-ace-base="/js/ace/" type="text/javascript" charset="utf-8"></script>
        <script src="/js/ace/ext-language_tools.js" type="text/javascript"></script>
        <script src="/js/ace/ext-searchbox.js" type="text/javascript"></script>
        
        <script src="doc-library/doc.js" type="text/javascript"></script>
        <link href="doc-library/doc.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <gs-jumbo>
            <h1 class="text-center">Panel</h1>
        </gs-jumbo>
            
        <gs-container padded>
            <h3 class="doc-header">Tag:</h3>
                <p>&lt;gs-panel&gt;</p>
            
            
            <h3 class="doc-header">Description:</h3>
            
                <p>Panels go by various names. Left-menu, side-menu, side-bar, etc... This element is used for creating side panels that work predictably across all screen sizes. Typical side panel behavior is accessable via attributes and methods. Sometimes panel functionality needs to be included in browser history (to enable the back button). To make it easy to include panel functionality in browser history this element is query string aware.</p>
            
            
            <h1>Examples:</h1>
            
            <div class="doc-section">
                <div class="doc-example-description">
                    <span class="h3">Skeleton Example:</span>
                    <p>A basic gs-panel element with a left bar. Without attributes, when the viewport is small enough to cause the panel to overlap the content, the default behavior is for a shadow to fall over the content. When this happens the panel is dismissable. If there is enough room to display both panel and content then the panel is not dismissable. When using no attributes make sure you don't end up with a button that is supposed to dismiss the panel when that functionality is not available.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="30">
                        <gs-panel id="panel">
                            <gs-page id="left-bar" style="width: 17em;">
                                <gs-header>
                                    <center><h3>Panel</h3></center>
                                </gs-header>
                                <gs-body>
                                    <gs-button onclick="document.getElementById('panel').hide('left-bar');">Close Panel</gs-button>
                                </gs-body>
                            </gs-page>
                            <gs-page>
                                <gs-header>
                                    <center><h3>Page</h3></center>
                                </gs-header>
                                <gs-body>
                                    <gs-button onclick="document.getElementById('panel').show('left-bar');">Open Panel</gs-button>
                                </gs-body>
                            </gs-page>
                        </gs-panel>
                    </template>
                    <template for="js">
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Right Panel Example:</span>
                    <p>To make a right-panel, simply put the style="width:" on the last gs-page element in the gs-panel element.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="30">
                        <gs-panel id="panel">
                            <gs-page>
                                <gs-header>
                                    <center><h3>Page</h3></center>
                                </gs-header>
                                <gs-body>
                                    <gs-button onclick="document.getElementById('panel').show('right-bar');">Open Panel</gs-button>
                                </gs-body>
                            </gs-page>
                            <gs-page id="right-bar" style="width: 17em;">
                                <gs-header>
                                    <center><h3>Panel</h3></center>
                                </gs-header>
                                <gs-body>
                                    <gs-button onclick="document.getElementById('panel').hide('right-bar');">Close Panel</gs-button>
                                </gs-body>
                            </gs-page>
                        </gs-panel>
                    </template>
                    <template for="js">
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute "no-shadow-dismiss":</span>
                    <p>When the viewport is small enough to cause the panel to overlap the content, a shadow will fall over the content. The default behavior of gs-panel is to allow a user to dismiss the panel by clicking on the shadow. To prevent "click on shadow to dismiss" behavior, add the no-shadow-dismiss attribute to the gs-panel tag.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="30">
                        <gs-panel id="panel" no-shadow-dismiss>
                            <gs-page id="left-bar" style="width: 17em;">
                                <gs-header>
                                    <center><h3>Panel</h3></center>
                                </gs-header>
                                <gs-body>
                                    <gs-button onclick="document.getElementById('panel').hide('left-bar');">Close Panel</gs-button>
                                </gs-body>
                            </gs-page>
                            <gs-page>
                                <gs-header>
                                    <center><h3>Page</h3></center>
                                </gs-header>
                                <gs-body>
                                    <gs-button onclick="document.getElementById('panel').show('left-bar');">Open Panel</gs-button>
                                </gs-body>
                            </gs-page>
                        </gs-panel>
                    </template>
                    <template for="js">
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Attribute "dismissible":</span>
                    <p>When the viewport is wide enough to display a panel and content side by side without overlap, the default behavior is to prevent the panel from being closed. In this example, we wish to dismiss the panel even when there is plenty of room. By adding the dismissible attribute, the panel becomes dismissable regardless of viewport size.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="30">
                        <gs-panel id="panel" dismissible>
                            <gs-page id="left-bar" style="width: 17em;">
                                <gs-header>
                                    <center><h3>Panel</h3></center>
                                </gs-header>
                                <gs-body>
                                    <gs-button onclick="document.getElementById('panel').hide('left-bar');">Close Panel</gs-button>
                                </gs-body>
                            </gs-page>
                            <gs-page>
                                <gs-header>
                                    <center><h3>Page</h3></center>
                                </gs-header>
                                <gs-body>
                                    <gs-button onclick="document.getElementById('panel').show('left-bar');">Open Panel</gs-button>
                                </gs-body>
                            </gs-page>
                        </gs-panel>
                    </template>
                    <template for="js">
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Method "hide":</span>
                    <p>Javascript: document.getElementById('&lt;id of panel&gt;').hide('&lt;id of page&gt;');</p>
                    <p>To hide the panel, gs-panel provides the "hide" method. In this example we run the hide method on the panel and give it the id "left-bar" as an argument.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="30">
                        <gs-panel id="panel" dismissible>
                            <gs-page id="left-bar" style="width: 17em;">
                                <gs-header>
                                    <center><h3>Panel</h3></center>
                                </gs-header>
                                <gs-body>
                                    <gs-button onclick="hidePanel()">Close Panel</gs-button>
                                </gs-body>
                            </gs-page>
                            <gs-page>
                                <gs-header>
                                    <center><h3>Page</h3></center>
                                </gs-header>
                                <gs-body>
                                    Content
                                </gs-body>
                            </gs-page>
                        </gs-panel>
                    </template>
                    <template for="js">
                        function hidePanel() {
                            document.getElementById('panel').hide('left-bar');
                        }
                    </template>
                </gs-doc-example> 
                
                <div class="doc-example-description">
                    <span class="h3">Method "show":</span>
                    <p>Javascript: document.getElementById('&lt;id of panel&gt;').show('&lt;id of page&gt;');</p>
                    <p>To show the panel, gs-panel provides the "show" method. In this example we run the show method on the panel and give it the id "left-bar" as an argument.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="30">
                        <gs-panel id="panel" dismissible left-bar="hide">
                            <gs-page id="left-bar" style="width: 17em;">
                                <gs-header>
                                    <center><h3>Panel</h3></center>
                                </gs-header>
                                <gs-body>
                                    Content
                                </gs-body>
                            </gs-page>
                            <gs-page>
                                <gs-header>
                                    <center><h3>Page</h3></center>
                                </gs-header>
                                <gs-body>
                                    <gs-button onclick="showPanel()">Open Panel</gs-button>
                                </gs-body>
                            </gs-page>
                        </gs-panel>
                    </template>
                    <template for="js">
                        function showPanel() {
                            document.getElementById('panel').show('left-bar');
                        }
                    </template>
                </gs-doc-example>
                
                <div class="doc-example-description">
                    <span class="h3">Method "toggle":</span>
                    <p>Javascript: document.getElementById('&lt;id of panel&gt;').toggle('&lt;id of page&gt;');</p>
                    <p>To show the panel, gs-panel provides the "toggle" method. In this example we run the toggle method on the panel and give it the id "left-bar" as an argument.</p>
                </div>
                <gs-doc-example>
                    <template for="html" height="30">
                        <gs-panel id="panel" dismissible>
                            <gs-page id="left-bar" style="width: 17em;">
                                <gs-header>
                                    <center><h3>Panel</h3></center>
                                </gs-header>
                                <gs-body>
                                    Content
                                </gs-body>
                            </gs-page>
                            <gs-page>
                                <gs-header>
                                    <center><h3>Page</h3></center>
                                </gs-header>
                                <gs-body>
                                    <gs-button onclick="togglePanel()">Toggle Panel</gs-button>
                                </gs-body>
                            </gs-page>
                        </gs-panel>
                    </template>
                    <template for="js">
                        function togglePanel() {
                            document.getElementById('panel').toggle('left-bar');
                        }
                    </template>
                </gs-doc-example>
            </div>
        </gs-container>
    </body>
</html>
